<template>
  <div>
    <vue-loading v-show="!isLoaded"></vue-loading>
    <div v-show="isLoaded">
      <Table :request-data="requestData" v-on:list="listHander" ref="table">
        <template slot="search-box">
          <!-- 商品类型 -->
          <el-form-item label="筛选" style="margin-left:10px;">
            <el-select
              size="small"
              placeholder="请选择"
              style="width:100px"
              v-model="requestData.postData.filter"
            >
              <el-option label="全部类型" value></el-option>
              <el-option v-for="item of filterType" :label="item.key" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-show="filterInputShow">
            <el-input v-model="requestData.postData.text" style="width:130px"></el-input>
          </el-form-item>
          <el-form-item style="margin-left:10px;">
            <el-button size="small" @click="search" round>查询</el-button>
          </el-form-item>
        </template>
        <template slot="table-box">
          <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column label="生成日期" width="200">
              <template slot-scope="scope">
                <span>{{$utils.formatDateTime(scope.row.add_time)}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="username" label="用户"></el-table-column>
            <el-table-column prop="integral" label="积分" width="200">
              <template slot-scope="scope">
                <span
                  :style="scope.row.integral>0?'color:#5cb85c':'color:#f7b7b7'"
                >{{scope.row.integral>0?'+'+scope.row.integral:scope.row.integral}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="text" label="详情"></el-table-column>
            <el-table-column label="备注">
              <template slot-scope="scope">
                <span>{{scope.row.other==""?"-":scope.row.other}}</span>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </Table>
    </div>
  </div>
</template>
<script>
import Table from "@/components/Table.vue";
export default {
  components: {
    Table
  },
  data() {
    return {
      isLoaded: false,
      filterInputShow: false,
      filterType: [
        {
          key: "用户名称",
          value: "username"
        }
      ],
      requestData: {
        urlPath: "/log/allintegrallog",
        postData: {
          filter: "",
          text: "",
          page_num: 1
        }
      },
      tableData: []
    };
  },
  methods: {
    listHander(e) {
      this.tableData = e;
      this.isLoaded = true;
    },
    search() {
      this.$refs.table.init();
    },
    async handleRemove(index) {
      await this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      });
      this.$http
        .post("/trade/delete", this.tableData[index])
        .then(res => {
          if (res.code == 200) {
            this.tableData.splice(index, 1);
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    }
  },
  created() {},
  watch: {
    "requestData.postData.filter": function(value) {
      if (value === "username") {
        this.filterInputShow = true;
        this.requestData.postData.text = "";
      } else {
        this.filterInputShow = false;
      }
    }
  }
};
</script>
<style>
.dialog {
  width: 700px;
}
</style>



